<template>
    <div v-loading="loading">
        <p style="color: red;font-size: 12px;">带分页、条件筛选</p>

        <el-form ref="tableform" class="click-table2-form" size="mini" :inline="true" :model="formData">
            <el-form-item label="名字" prop="name">
                <el-input v-model="formData.name" placeholder="名字"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="role">
                <el-input v-model="formData.role" placeholder="请输入角色"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="formData.sex" placeholder="性别">
                    <el-option v-for="(item, index) in sexList" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchEvent">查询</el-button>
                <el-button @click="$refs.tableform.resetFields()">重置</el-button>
            </el-form-item>
        </el-form>

        <div class="click-table2-oper">
            <el-button type="success" size="mini" @click="insertEvent">新增</el-button>
            <el-button type="danger" size="mini" @click="pendingRemoveEvent">标记/取消删除</el-button>
            <el-button type="danger" size="mini" @click="deleteSelectedEvent">删除选中</el-button>
            <el-button type="warning" size="mini" @click="submitEvent">保存</el-button>
            <el-button type="success" size="mini" @click="exportCsvEvent">导出</el-button>
        </div>

        <elx-editable
                ref="elxEditable"
                class="click-table2"
                border
                height="466"
                size="small"
                :default-sort="{prop: 'updateTime', order: 'descending'}"
                :data.sync="list"
                :row-class-name="tableRowClassName"
                :edit-config="{trigger: 'click', mode: 'row'}"
                style="width: 100%">
            <elx-editable-column type="selection" width="55"></elx-editable-column>
            <elx-editable-column prop="id" label="ID" width="80"></elx-editable-column>
            <elx-editable-column prop="name" label="名字" show-overflow-tooltip :edit-render="{name: 'ElInput'}"></elx-editable-column>
            <elx-editable-column prop="sex" label="性别" sortable :filters="[{text: '男', value: '1'}, {text: '女', value: '0'}]" :filter-method="filterHandler" :edit-render="{name: 'ElSelect', options: sexList}"></elx-editable-column>
            <elx-editable-column prop="age" label="年龄" :edit-render="{name: 'ElInputNumber', props: {min: 1, max: 200}}"></elx-editable-column>
            <elx-editable-column prop="region" label="地区" width="200" :edit-render="{name: 'ElCascader', props: {options: regionList, showAllLevels: false}}"></elx-editable-column>
            <elx-editable-column prop="role" label="角色" show-overflow-tooltip :edit-render="{name: 'ElInput'}"></elx-editable-column>
            <elx-editable-column prop="describe" label="文本域" show-overflow-tooltip :edit-render="{name: 'ElInput', props: {type: 'textarea', autosize: {minRows: 1, maxRows: 4}}}"></elx-editable-column>
            <elx-editable-column prop="date" label="日期" sortable :edit-render="{name: 'ElDatePicker', props: {type: 'datetime', format: 'yyyy-MM-dd'}}"></elx-editable-column>
            <elx-editable-column prop="flag" label="是否启用" :edit-render="{name: 'ElSwitch', type: 'visible'}"></elx-editable-column>
            <elx-editable-column prop="updateTime" label="更新时间" sortable width="160" :formatter="formatterDate"></elx-editable-column>
            <elx-editable-column prop="createTime" label="创建时间" width="160" :formatter="formatterDate"></elx-editable-column>
            <elx-editable-column prop="attr3" label="链接">
                <template>
                    <a href="https://github.com/xuliangzhan/vue-element-extends" target="_blank">打开链接</a>
                </template>
            </elx-editable-column>
            <elx-editable-column label="操作" width="100">
                <template v-slot="scope">
                    <el-button size="mini" type="danger" @click="removeEvent(scope.row)">删除</el-button>
                </template>
            </elx-editable-column>
        </elx-editable>

        <el-pagination
                class="click-table2-pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageVO.currentPage"
                :page-sizes="[5, 10, 15, 20, 50, 100, 150, 200]"
                :page-size="pageVO.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageVO.totalResult">
        </el-pagination>
    </div>
</template>

<script>
    import XEUtils from 'xe-utils';
    import XEAjax from 'xe-ajax';
    import { MessageBox, Message } from 'element-ui';

    export default {
        data () {
            return {
                loading: false,
                sexList: [],
                regionList: [],
                list: [],
                formData: {
                    name: null,
                    sex: null,
                    role: null
                },
                pageVO: {
                    currentPage: 1,
                    pageSize: 10,
                    totalResult: 0
                },
                pendingRemoveList: []
            };
        },
        created () {
            this.findSexList();
            this.findRegionList();
            this.findList();
        },
        methods: {
            findList () {
                this.loading = true;
                this.pendingRemoveList = [];
                XEAjax.doGet(`/api/user/page/list/${this.pageVO.pageSize}/${this.pageVO.currentPage}`, this.formData).then(response => {
                    let { page, result } = response.data;
                    this.list = result;
                    this.pageVO.totalResult = page.totalResult;
                    this.loading = false;
                }).catch(e => {
                    this.loading = false;
                });
            },
            findSexList () {
                return XEAjax.doGet('/api/conf/sex/list').then(({ data }) => {
                    this.sexList = data;
                    return data;
                });
            },
            findRegionList () {
                return XEAjax.doGet('/api/conf/region/list').then(({ data }) => {
                    this.regionList = data;
                    return data;
                });
            },
            searchEvent () {
                this.pageVO.currentPage = 1;
                this.findList();
            },
            handleSizeChange (pageSize) {
                this.pageVO.pageSize = pageSize;
                this.findList();
            },
            handleCurrentChange (currentPage) {
                this.pageVO.currentPage = currentPage;
                this.findList();
            },
            formatterDate (row, column, cellValue, index) {
                return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss');
            },
            tableRowClassName ({ row, rowIndex }) {
                if (this.pendingRemoveList.some(item => item === row)) {
                    return 'delete-row';
                }
                return '';
            },
            filterHandler (value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            insertEvent () {
                this.$refs.elxEditable.insert({
                    name: `New ${Date.now()}`,
                    age: 26,
                    flag: false
                }).then(({ row }) => {
                    this.$refs.elxEditable.setActiveRow(row);
                });
            },
            removeEvent (row) {
                if (row.id) {
                    MessageBox.confirm('确定永久删除该数据?', '温馨提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.loading = true
                        XEAjax.doDelete(`/api/user/delete/${row.id}`).then(({ data }) => {
                            this.findList();
                        }).catch(e => {
                            this.loading = false;
                        });
                    }).catch(e => e);
                } else {
                    this.$refs.elxEditable.remove(row);
                }
            },
            pendingRemoveEvent () {
                let selection = this.$refs.elxEditable.getSelecteds();
                if (selection.length) {
                    let plus = [];
                    let minus = [];
                    selection.forEach(data => {
                        if (this.pendingRemoveList.some(item => data === item)) {
                            minus.push(data);
                        } else {
                            plus.push(data);
                        }
                    });
                    if (minus.length) {
                        this.pendingRemoveList = this.pendingRemoveList.filter(item => minus.some(data => data !== item)).concat(plus);
                    } else if (plus) {
                        this.pendingRemoveList = this.pendingRemoveList.concat(plus);
                    }
                    this.$refs.elxEditable.clearSelection();
                } else {
                    Message({
                        type: 'info',
                        message: '请至少选择一条数据！'
                    });
                }
            },
            deleteSelectedEvent () {
                let removeRecords = this.$refs.elxEditable.getSelecteds();
                if (removeRecords.length) {
                    MessageBox.confirm('确定删除所选数据?', '温馨提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.loading = true;
                        XEAjax.doPost('/api/user/save', { removeRecords }).then(({ data }) => {
                            Message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.findList();
                        }).catch(e => {
                            this.loading = false;
                        });
                    }).catch(e => e);
                } else {
                    Message({
                        type: 'info',
                        message: '请至少选择一条数据！'
                    });
                }
            },
            submitEvent () {
                this.$refs.elxEditable.validate(valid => {
                    if (valid) {
                        let removeRecords = this.pendingRemoveList;
                        let { insertRecords, updateRecords } = this.$refs.elxEditable.getAllRecords();
                        if (insertRecords.length || updateRecords.length || removeRecords.length) {
                            insertRecords.forEach(item => {
                                if (XEUtils.isDate(item.date)) {
                                    item.date = item.date.getTime();
                                }
                            });
                            updateRecords.forEach(item => {
                                if (XEUtils.isDate(item.date)) {
                                    item.date = item.date.getTime();
                                }
                            });
                            this.loading = true;
                            XEAjax.doPost('/api/user/save', { insertRecords, updateRecords, removeRecords }).then(({ data }) => {
                                Message({
                                    type: 'success',
                                    message: '保存成功!'
                                });
                                this.findList();
                            }).catch(e => {
                                this.loading = false;
                            });
                        } else {
                            Message({
                                type: 'info',
                                message: '数据未改动！'
                            });
                        }
                    }
                });
            },
            exportCsvEvent () {
                this.$refs.elxEditable.exportCsv();
            }
        }
    };
</script>

<style>
    .click-table2-oper {
        margin-bottom: 18px;
    }
    .click-table2 .delete-row {
        color: #f56c6c;
        text-decoration: line-through;
    }
    .click-table2-pagination {
        margin-top: 18px;
        text-align: right;
    }
    .click-table2.elx-editable .elx-editable-row.new-insert,
    .click-table2.elx-editable .elx-editable-row.new-insert:hover>td {
        background-color: #f0f9eb;
    }
</style>
